This is the js code I have written. It generate a random string. I have set this string to be 100 characters long but it doesnt "fit" the input box. The string is just shown on one line.
<div>
<script>
var password = document.getElementById("password");
function genPassword() {
var chars =
"0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var passwordLength = 100;
var password = "";
for (var i = 0; i <= passwordLength; i++) {
var randomNumber = Math.floor(Math.random() * chars.length);
password += chars.substring(randomNumber, randomNumber + 1);
}
document.getElementById("password").value = password;
}
function copyPassword() {
var copyText = document.getElementById("password");
copyText.select();
copyText.setSelectionRange(0, 999);
document.execCommand("copy");
}
</script>
<div class="konzbox">
<h2>Zufälliger Konztest-Generator</h2>
<input
type="text"
name=""
placeholder="Erstelle Konztest"
id="password"
readonly
/>
<table>
<th>
<div id="button" class="btn1" onclick="genPassword()">Generate</div>
</th>
<th>
<div id="button" class="btn2" onclick="copyPassword()">Copy</div>
</th>
</table>
</div>
</div>You can use a textarea instead of input for your password.
function genPassword() {
var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var passwordLength = 100;
var password = "";
for (var i = 0; i <= passwordLength; i++) {
var randomNumber = Math.floor(Math.random() * chars.length);
password += chars.substring(randomNumber, randomNumber +1);
}
document.getElementById("password").value = password;
}
function copyPassword() {
var copyText = document.getElementById("password");
copyText.select();
copyText.setSelectionRange(0, 999);
document.execCommand("copy");
}<div class="konzbox">
<h2>Zufälliger Konztest-Generator</h2>
<textarea name="" id="password" cols="30" rows="10" readonly></textarea>
<table>
<th><div id="button" class="btn1" onclick="genPassword()">Generate</div></th>
<th><div id="button" class="btn2" onclick="copyPassword()">Copy</div></th>
</table>
</div>